<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h1>当前求和放大10倍为{{ bigSum }}</h1>
    <h1>学校{{ school}} 学科{{subject}}</h1>
    <h3 style="color:red">人数：{{personList.length}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <!-- <button @click="JIA(num)">+</button>
    <button @click="JIAN(num)">-</button> -->
    <button @click="incrementOdd(num)">奇数再加+</button>
    <button @click="incrementWait(num)">等一等再+</button>
    <!-- <button @click="jiaOdd(num)">奇数再加+</button>
    <button @click="jiaWait(num)">等一等再+</button> -->
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: "Count",
  data() {
    return {
      num: 1, //选择数
    };
  },
  methods: {
    // increment() {
    //    this.$store.dispatch('jia', this.num)
    // },
    // decrement() {
    //    this.$store.dispatch('jian',this.num)
    // },
    // increment(){
    //    this.jiajia(this.num)
    // },
    // decrement(){
    //    this.jianjian(this.num)
    // },
    ...mapMutations('countOptions',{increment:'JIA',decrement:'JIAN'}),
    //函数名也要变成jia jian
    //...mapMutations(['JIA','JIAN']),
    //函数不带参的写法
    //...mapMutations({jiajia:'JIA',jianjian:'JIAN'}),
    // incrementOdd() {
    //   // if (this.$store.state.sum % 2) {
    //   //   this.$store.dispatch('jia', this.num)
    //   // }
    //   this.$store.dispatch('jiaOdd', this.num)
    // },
    // incrementWait() {
    //   // setTimeout(() => {
    //   //   this.$store.dispatch('jia', this.num)
    //   // }, 500);
    //   this.$store.dispatch('jiaWait', this.num)
    // },
    ...mapActions('countOptions',{
      incrementOdd:'jiaOdd',
      incrementWait:'jiaWait'
    })
    //...mapActions(['jiaOdd','jiaWait'])
  },
  mounted() {

	},
  computed: {
    // sum(){
    //     return this.$store.state.sum
    // },
    // school(){
    //     return this.$store.state.school
    // },
    // subject(){
    //     return this.$store.state.subject
    // }
    // ...mapState({sum:'sum',school:'school',subject:'subject'})
    ...mapState('countOptions',['sum','school','subject']),
    ...mapState('personOptions',['personList']),
    //...mapGetters({bigSum:'bigSum'})
    ...mapGetters('countOptions',['bigSum'])
  }
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>